<template>
    <a-row type="flex" :gutter="16">
      <a-col :md="6" :sm="24">
        <a-card :bordered="false" style="height: 100vh;overflow: auto;" title="分组列表">
          <div>
            <a-button-group>
              <a-button @click="handleAdd" type="primary" icon="plus">新增分组</a-button>
              <a-button v-if="selectedKeys.length>0&&isRootNode==false" @click="handleEdit" type="primary" icon="edit">编辑</a-button>
              <a-button v-if="selectedKeys.length>0&&isRootNode==false" @click="handleDelete" type="danger" icon="remove">删除</a-button>
            </a-button-group>
          </div>
<!--          <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入分组名称"/>-->
          <a-tree
            showLine
            :selectedKeys="selectedKeys"
            :checkStrictly="true"
            @select="onSelect"
            :dropdownStyle="{maxHeight:'100vh',overflow:'auto'}"
            :treeData="typeTree"
            :defaultExpandAll="true"
            :defaultSelectedKeys="defaultSelectedKeys"
            @expand="onExpand"
          />
        </a-card>
        <woPersonType-modal ref="modalForm" @ok="modalFormOk"></woPersonType-modal>
      </a-col>
      <a-col :md="18" :sm="24">
        <wo-people-list ref="peopleList" :type-id="selectedKeys"></wo-people-list>
      </a-col>
    </a-row>
</template>

<script>
import { httpAction, getAction,deleteAction } from '@/api/manage'
import WoPeopleList from "@views/wo/people/WoPeopleList";
import WoPersonTypeModal from './modules/WoPersonTypeModal'
export default {
  name: "TypePeople",
  components:{
    WoPeopleList,
    WoPersonTypeModal
  },
  data(){
    return{
      typeId:'',
      isRootNode:false,
      defaultSelectedKeys:[],
      checkedKeys: [],
      selectedKeys: [],
      typeTree: [],
      autoExpandParent: true,
      iExpandedKeys: [],
      url:{
        typeList:"/persontype/woPersonType/queryTreeList",
        getById:"/persontype/woPersonType/queryById",
        delete:"/persontype/woPersonType/delete"
      }
    }
  },
  created() {
    this.loadTree()
  },
  methods:{
    handleAdd(){
      if(this.selectedKeys.length===0){
        this.$message.warning("请选择分组！");
        return;
      }
      this.$refs.modalForm.add(this.selectedKeys[0]);
    },
    handleEdit(){
      const that=this;
      getAction(this.url.getById,{id:this.selectedKeys[0]}).then((res)=>{
        if(res.success){
          that.$refs.modalForm.edit(res.result);
        }else{
          that.$message.warning(res.message);
        }
      })
    },
    handleDelete(){
      const that=this;
      deleteAction(this.url.delete,{id:this.selectedKeys[0]}).then((res)=>{
        if(res.success){
          this.refresh()
          that.$message.warning(res.message);
        }else{
          that.$message.warning(res.message);
        }
      })
    },
    loadTree() {
      const that = this
      that.typeTree = []
      that.loading = true;
      getAction(this.url.typeList,{}).then((res)=>{
        if (res.success && res.result ) {
          that.typeTree=res.result;
          that.defaultSelectedKeys=[that.typeTree[0].key];
          that.selectedKeys = [that.typeTree[0].key];
          that.isRootNode=true;
          this.$nextTick(()=> {
            that.$refs.peopleList.loadPeople(this.selectedKeys[0]);
          })
        }
      }).finally(() => {
        that.loading = false
      });
    },
    refresh() {
      this.loading = true
      this.loadTree()
    },
    onSearch(){

    },
    onSelect(selectedKeys, event) {
      let node=event.selectedNodes[0].data.props;
      if(node.root===true){
        this.isRootNode=true;
      }else{
        this.isRootNode=false;
      }
      if (selectedKeys.length > 0 && this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]]
        this.$refs.peopleList.loadPeople(this.selectedKeys[0]);
      }
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    setThisExpandedKeys(node) {
      //只展开一级目录
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        //下方代码放开注释则默认展开所有节点
        /**
         for (let a = 0; a < node.children.length; a++) {
            this.setThisExpandedKeys(node.children[a])
          }
         */
      }
    },
    modalFormOk(){
      this.loadTree();
    }
  }

}
</script>

<style scoped>

</style>